<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="blog/layout" th:with="title='Tags |',active='tabs'">
<header th:replace="blog/layout::headerFragment(${title},${active})"></header>

<body>
    <div layout:fragment="content">
        <div class="content-wrap">
            <div id="content" class="content">
                <div id="posts" class="posts-expand">
                    <header class="post-header" style="opacity: 1; display: block; transform: translateY(0px);">
                        <h1 class="post-title" itemprop="name headline">All Tags</h1>
                    </header>
                    <div class="tag-cloud">
                        <div class="tag-cloud-title">
                            Now <th:block th:text="${tagCount}"></th:block> tags in total.
                        </div>
                        <div class="tag-cloud-tags">
                            <th:block th:if="${tags}">
                                <th:block th:each="tag : ${tags}">
                                    <th:block th:if="${tag.count != 0}">
                                        <a th:href="@{'/tags/'} + ${tag.name}"
                                            th:style="'font-size:'+ ${commons.randomInt(15,'px')}+';color:#555' ">
                                            <th:block th:text="${tag.name}"></th:block>
                                        </a>
                                    </th:block>
                                    <th:block th:unless="${tag.count != 0}">
                                        <a th:style="'font-size:'+ ${commons.randomInt(15,'px')}+';color:#555' ">
                                            <th:block th:text="${tag.name}"></th:block>
                                        </a>
                                    </th:block>
                                </th:block>
                            </th:block>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>